<template>
	<div>
		<navigationBar :backType="2" navigationTitle="充值记录" />

		<dateScreen />

		<view class="wrap safe-area">
			<view class="wrap-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="item flex align-center just-between">
						<view class="left">
							<view class="title fBold f-28"> 上门保洁-2小时开荒保姐 </view>

							<view class="subItem flex align-center f-26">
								<text class="text"> 服务师： </text>
								<text class="value limit-num-line"> 术超 </text>
							</view>

							<view class="subItem flex align-center f-26">
								<text class="text"> 支付金额： </text>
								<text class="value price limit-num-line"> ￥100 </text>
							</view>

							<view class="subItem flex align-center f-26">
								<text class="text"> 充值时间： </text>
								<text class="value"> 2024-05-12 12:12:15 </text>
							</view>
						</view>

						<view class="price-bg flex column align-end">
							<view class="price f-36"> ¥120.00 </view>
							<view class="balance f-24">余额：4513.22</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</div>
</template>

<script>
	import dateScreen from "@/components/mine/date_screen.vue";
	export default {
		components: {
			dateScreen,
		},
		data() {
			return {
				list: [, , , , , , , , , ,],
			};
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-list {
		padding: 0 20rpx;
		overflow: hidden;
		width: 100%;
		box-sizing: border-box;

		.item {
			margin-top: 20rpx;
			width: 100%;
			overflow: hidden;
			background-color: white;
			border-radius: 20rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.left {
				margin-right: 10rpx;
				flex: 1;
				overflow: hidden;

				.title {
					color: $title-color;
				}

				.subItem {
					margin-top: 30rpx;
					width: 100%;
					overflow: hidden;

					.text {
						color: $title-color;
					}
					.value {
						flex: 1;
						overflow: hidden;
						--limit-num: 1;
						color: $sub-title-color;
					}
				}
			}

			.price-bg {
				.balance {
					margin-top: 8rpx;
					color: $sub-title-color;
				}
			}
			.price {
				color: $price-color !important;
			}
		}
	}
</style>
